{extend name="public/base" /}
{block name="css"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.css" /}
<style>
  .main-container {
    background: #ffffff;
    text-align: center;
  }

  .cases-container {
    width: 1200px;
  }

  .cases-container > .cases-list {
    width: 1200px;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 60px;
  }

  .cases-container > .cases-list > .cases-item {
    width: 380px;
    margin-top: 30px;
    margin-right: 30px;
    border: 1px #E5E5E5 solid;
    padding: 20px;
  }

  .cases-container > .cases-list > .cases-item:nth-child(3n+3) {
    width: 380px;
    margin-top: 30px;
    margin-right: 0;
  }

  .cases-container > .cases-list > .cases-item > div {
    background: #ffffff;
  }

  .cases-container > .cases-list > .cases-item > img {
    max-width: 100%;
  }

  .case-title {
    text-align: left;
    font-size: 22px;
    margin-top: 20px;
    font-weight: 400;
    margin-bottom: 5px;
  }

  .case-info {
    font-size: 16px;
    color: #93412C;
    text-align: left;
    border-bottom: 1px #e5e5e5 solid;
    padding-bottom: 15px;
  }

  .case-time {
    display: flex;
    justify-content: space-between;
  }

  .case-time > span {
    color: #333;
  }

  .case-time > div {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .case-time > div > span {
    color: #93412C;
    font-size: 16px;
    margin-left: 8px;
  }

  .case-action {
    margin-top: 20px;
  }

  .case-detail {
    height: 40px;
    color: #93412C;
    background: transparent;
    font-size: 16px;
    margin-right: 8px;
    padding: 1px 16px;
    border: 1px #93412C solid;
    border-radius: 4px;
  }
  .case-right {
    height: 40px;
    color: #ffffff;
    background: #93412C;
    border: 1px #93412C solid;
    border-radius: 4px;
    font-size: 16px;
    margin-left: 8px;
    padding: 1px 16px;
  }

  .case-more {
    height: 40px;
    color: #ffffff;
    background: #93412C;
    border: 1px #93412C solid;
    border-radius: 4px;
    font-size: 16px;
    padding: 1px 20px;
    margin: 25px;
  }

  .pagination {
    display: flex;
    justify-content: center;
    margin: 0 0 50px;
  }

  .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
    color: #ccc;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
  }

  .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #1C2857;
    border-color: #1C2857;
  }

  .pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 16px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #1C2857;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper-container .swiper-button-prev::after {
    content: '';
  }
  .swiper-container .swiper-button-next::after {
    content: '';
  }
  .swiper-container .swiper-button-prev{
    background-image: url('https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/cases/pc/left.png') ;
    left: 15px;
    right: auto;
    width: 30px;
    height: 30px;
    background-size: cover;
  }
  .swiper-container .swiper-button-next{
    background: url('https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/cases/pc/right.png');
    right: 15px;
    width: 30px;
    height: 30px;
    left: auto;
    background-size:cover;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <img alt="" class="page-banner" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/building/pc/banner.png" />

  <div class="d-flex flex-column mx-auto cases-container">
    <div class="cases-list">
      {volist name='list' id='item'}
        <div class="cases-item">
          <img src="{$item.cover}" alt="" />
          <div>
            <p class="case-title">{$item.building}</p>
            <p class="case-info">已报名{$item.enrolled}户，已签约{$item.signed}户，软装方案{$item.plan}套</p>
            <div class="case-time">
              <span>距离结束</span>
              <div>
                <img alt="" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/building/pc/time.png">
                <span class="endTime" date="{$item.endTime}"></span>
              </div>
            </div>
            <div class="case-action">
              <button class="case-detail" data-caseid="{$item.id}">查看软装方案 ></button>
              <button onclick="showAppointmentLayer()" class="case-right">立即参团 ></button>
            </div>
          </div>
        </div>
      {/volist}
    </div>
  </div>
</section>
{volist name='list' id='detail'}
<section class="case-modal" id="{$detail.id}" style="display:none; align-items: center; justify-content: center;background: rgba(0,0,0,.2);position: fixed;top:0;left: 0;width: 100vw;height: 100vh; overflow: hidden">
  <div style="width: 680px;height: 585px;background: #FFFFFF; padding: 25px 15px 25px 25px; box-sizing: content-box;text-align: center">
    <div style="display: flex;justify-content: space-between;position: relative;z-index: 9999">
      <span style="font-size:20px;">
      </span>
      <img alt="" class="case-modal-close" style="width: 20px;height: 20px; cursor: pointer" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/cases/pc/close.png" />
    </div>
    <div style="display: flex;align-items: center">
      <div style="margin-top: -22px;width: 680px;height: 520px">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            {volist name="detail['album']" id='album'}
            <div class="swiper-slide">
              <div>
                <div style="text-align: left;margin-bottom: 15px">{$detail.building}&nbsp; | &nbsp;{$album.style}</div>
                <img class="img-fluid" data-style="{$album.style}" style="width: 680px;height: 482px" src="{$album.img}">
              </div>
            </div>
            {/volist}
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
        <button onclick="showAppointmentPlan()" class="case-more">获取更多软装方案 ></button>
      </div>
    </div>
  </div>
</section>
{/volist}
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.js" /}
<script>

    // $('.case-modal').on('click',  function(event) {
    //     if (event.target == this){
    //         $(this).fadeOut();
    //         $("body,html").css({"overflow":"auto"});
    //     }
    // });

    $('.case-detail').on('click', function (e) {
        $("body,html").css({'overflow': 'hidden'});
        console.log($(this).data('caseid'));
        $(`#${$(this).data('caseid')}`).fadeIn();
        $(`#${$(this).data('caseid')}`).css('display', 'flex');
        const swiper = new Swiper('.swiper-container', {
            loop: true,
            autoplay: {
                delay: 3500,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            on: {
                slideChangeTransitionEnd: function(){
                },
            },
        });
    });
    
    $('.case-modal-close').on('click', function () {
        $('.case-modal').fadeOut();
        $("body,html").css({'overflow': 'auto'});
    });

    $('.navbar-nav').children('li').eq(6).addClass('nav-active');

    $('.endTime').each(function () {
        const timeEle = $(this);
        const date = $(this).attr("date");
        timeDown(timeEle, date);
    });

    /*
    时间倒计时插件
    */
    function timeDown(e, endDateStr) {
        //结束时间
        const endDate = new Date(endDateStr);
        //当前时间
        const nowDate = new Date();
        //相差的总秒数
        const totalSeconds = parseInt((endDate - nowDate) / 1000);
        //天数
        const days = Math.floor(totalSeconds / (60 * 60 * 24));
        //取模（余数）
        let modulo = totalSeconds % (60 * 60 * 24);
        //小时数
        const hours = Math.floor(modulo / (60 * 60));
        modulo = modulo % (60 * 60);
        //分钟
        const minutes = Math.floor(modulo / 60);
        //秒
        const seconds = modulo % 60;

        let d = days;
        if(days < 10){
            d = `0${days}`;
        }

        let h = hours;
        if(hours < 10){
            h = `0${hours}`;
        }

        let m = minutes;
        if(minutes < 10){
            m = `0${minutes}`;
        }

        let s = seconds;
        if(seconds < 10){
            s = `0${seconds}`;
        }

        //输出到页面
        e.html(`${d}天${h}时${m}分${s}秒`);


        //延迟一秒执行自己
        setTimeout(function () {
            timeDown(e, endDateStr);
        }, 1000)
    }
</script>
{/block}